import { gsap } from 'gsap';

// 通用动画配置
export const animationConfig = {
  duration: 0.3,
  ease: "power2.out",
  stagger: 0.1
};

// 淡入动画
export const fadeIn = (element: HTMLElement | string, options?: gsap.TweenVars) => {
  return gsap.fromTo(element, 
    { opacity: 0, y: 20 },
    { 
      opacity: 1, 
      y: 0, 
      duration: animationConfig.duration,
      ease: animationConfig.ease,
      ...options 
    }
  );
};

// 淡出动画
export const fadeOut = (element: HTMLElement | string, options?: gsap.TweenVars) => {
  return gsap.to(element, 
    { 
      opacity: 0, 
      y: -20, 
      duration: animationConfig.duration,
      ease: animationConfig.ease,
      ...options 
    }
  );
};

// 滑入动画
export const slideIn = (element: HTMLElement | string, direction: 'left' | 'right' | 'up' | 'down' = 'up', options?: gsap.TweenVars) => {
  const fromProps: gsap.TweenVars = {};
  const toProps: gsap.TweenVars = { x: 0, y: 0 };
  
  switch (direction) {
    case 'left':
      fromProps.x = -100;
      break;
    case 'right':
      fromProps.x = 100;
      break;
    case 'up':
      fromProps.y = -100;
      break;
    case 'down':
      fromProps.y = 100;
      break;
  }
  
  return gsap.fromTo(element, 
    fromProps,
    { 
      ...toProps,
      duration: animationConfig.duration,
      ease: animationConfig.ease,
      ...options 
    }
  );
};

// 缩放动画
export const scaleIn = (element: HTMLElement | string, options?: gsap.TweenVars) => {
  return gsap.fromTo(element, 
    { scale: 0, opacity: 0 },
    { 
      scale: 1, 
      opacity: 1, 
      duration: animationConfig.duration,
      ease: "power2.out",
      ...options 
    }
  );
};

// 旋转动画
export const rotateIn = (element: HTMLElement | string, options?: gsap.TweenVars) => {
  return gsap.fromTo(element, 
    { rotation: -180, opacity: 0 },
    { 
      rotation: 0, 
      opacity: 1, 
      duration: animationConfig.duration,
      ease: animationConfig.ease,
      ...options 
    }
  );
};

// 弹性动画
export const bounceIn = (element: HTMLElement | string, options?: gsap.TweenVars) => {
  return gsap.fromTo(element, 
    { scale: 0, y: -100 },
    { 
      scale: 1, 
      y: 0, 
      duration: 0.6,
      ease: "elastic.out(1, 0.3)",
      ...options 
    }
  );
};

// 打字机效果
export const typewriter = (element: HTMLElement | string, text: string, speed: number = 0.05) => {
  const el = typeof element === 'string' ? document.querySelector(element) as HTMLElement : element;
  if (!el) return;
  
  el.textContent = '';
  return gsap.to(el, {
    duration: text.length * speed,
    ease: "none",
    onUpdate: function() {
      const progress = this.progress();
      const currentLength = Math.floor(progress * text.length);
      el.textContent = text.substring(0, currentLength);
    }
  });
};

// 脉冲动画
export const pulse = (element: HTMLElement | string, options?: gsap.TweenVars) => {
  return gsap.to(element, {
    scale: 1.1,
    duration: 0.5,
    ease: "power2.inOut",
    yoyo: true,
    repeat: -1,
    ...options
  });
};

// 摇摆动画
export const shake = (element: HTMLElement | string, options?: gsap.TweenVars) => {
  return gsap.to(element, {
    x: "+=10",
    duration: 0.1,
    ease: "power2.inOut",
    yoyo: true,
    repeat: 5,
    ...options
  });
};

// 渐现动画（用于列表项）
export const staggerIn = (elements: HTMLElement[] | string, options?: gsap.TweenVars) => {
  return gsap.fromTo(elements, 
    { opacity: 0, y: 20 },
    { 
      opacity: 1, 
      y: 0, 
      duration: animationConfig.duration,
      ease: animationConfig.ease,
      stagger: animationConfig.stagger,
      ...options 
    }
  );
};

// 页面切换动画
export const pageTransition = {
  enter: (element: HTMLElement | string) => {
    return gsap.fromTo(element, 
      { opacity: 0, y: 30 },
      { 
        opacity: 1, 
        y: 0, 
        duration: 0.5,
        ease: "power2.out"
      }
    );
  },
  exit: (element: HTMLElement | string) => {
    return gsap.to(element, 
      { 
        opacity: 0, 
        y: -30, 
        duration: 0.3,
        ease: "power2.in"
      }
    );
  }
};

// 鼠标悬停动画
export const hoverScale = (element: HTMLElement | string, scale: number = 1.05) => {
  const el = typeof element === 'string' ? document.querySelector(element) as HTMLElement : element;
  if (!el) return;
  
  const onMouseEnter = () => {
    gsap.to(el, { scale, duration: 0.2, ease: "power2.out" });
  };
  
  const onMouseLeave = () => {
    gsap.to(el, { scale: 1, duration: 0.2, ease: "power2.out" });
  };
  
  el.addEventListener('mouseenter', onMouseEnter);
  el.addEventListener('mouseleave', onMouseLeave);
  
  return () => {
    el.removeEventListener('mouseenter', onMouseEnter);
    el.removeEventListener('mouseleave', onMouseLeave);
  };
};

// 滚动触发动画
export const scrollTrigger = (element: HTMLElement | string, animation: gsap.TweenVars) => {
  return gsap.fromTo(element, 
    { opacity: 0, y: 50 },
    {
      ...animation,
      scrollTrigger: {
        trigger: element,
        start: "top 80%",
        end: "bottom 20%",
        toggleActions: "play none none reverse"
      }
    }
  );
};

// 时间轴动画
export const createTimeline = (options?: gsap.TimelineVars) => {
  return gsap.timeline(options);
};

// 暂停所有动画
export const pauseAll = () => {
  gsap.globalTimeline.pause();
};

// 恢复所有动画
export const resumeAll = () => {
  gsap.globalTimeline.resume();
};

// 杀死所有动画
export const killAll = () => {
  gsap.killTweensOf("*");
};

export default {
  fadeIn,
  fadeOut,
  slideIn,
  scaleIn,
  rotateIn,
  bounceIn,
  typewriter,
  pulse,
  shake,
  staggerIn,
  pageTransition,
  hoverScale,
  scrollTrigger,
  createTimeline,
  pauseAll,
  resumeAll,
  killAll
};
